<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<!-- 普通JS引入 type="text/javascript"  -->
<!-- <script type="text/javascript" src="../js/md1.js"></script> -->

<!-- 模块化引入(使用模块化语法)  type="module" 只是以模块化语法引入JS模块,其他模块无法使用-->
<!-- <script type="module" src="../js/md1.js"></script> -->
<script type="module">

    import {c,getC,addA,addB} from "../js/md3.js";
    
    // ES6 模块化  => 直接用ES6模块化 
    // 将一个大程序拆分成互相依赖的小文件, 在通过简单的方式拼装起来

    // ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

    // ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。



    // ES6模块化
    // 1. 每一个JS文件都是一个独立的模块 (模块中的变量和方法都是局部的)
    // 2. export => 按需暴露 import=>按需引入
    // 3. 模块之间也是可以相互引入的
    // 4. 每一个模块都可以通过export default 设置一个默认值

    // 模块使用
    // 1. 外部JS引入(type="module")  => 只是以模块化语法引入JS模块,其他模块无法使用
    // 2. 按需引入 import {}  => 将模块中暴露的变量/方法 按需引入,赋值给变量


    // 优点:
    // 1. 将一个大程序拆分成互相依赖的小文件 => 代码分离/代码复用
    // 2. 按需暴露 按需引入
    // 3. 模块之间也是可以相互引入的

    console.log(c);
    
    addA();
    addB();
    
    console.log(getC());




</script>
</html>